<strong></strong><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="chat-dialog">hi，在吗？</div>
		 <ul class="tag-tab">
			<li>第一级</li>
			<li>第二级</li>
			<li>第三级</li>
			<li>第四级</li>
		 </ul>
		 
     
     <style>
			.chat-dialog {
			  position: relative;
			  width: 180px;
			  height: 32px;
			  line-height: 32px;
			  border-radius: 5px;
			  margin-left: 30px;
			  border: 1px solid #009a61;
			  padding: 4px;
			}
			
			.chat-dialog:before,
			.chat-dialog:after {
			  content: "";
			  display: block;
			  position: absolute;
			  top: 13px;
			  left: -13px;
			  width: 0;
			  height: 0;
			  border-width: 6px;
			  border-color: transparent;
			  border-style: solid;
			  border-right-color: #009a61;
			}

			.chat-dialog:after {
  				left: -12px;
  				border-right-color: #fff;
			}
      	      .tag-tab {
  font-size: 16px;
  height: 24px;
  list-style: none;
}

.tag-tab li {
  float: left;
  position: relative;
  padding-right: 12px;

}

.tag-tab>li:before,
.tag-tab>li:after {
  position: absolute;
  top: 0;
  right: -12px;
  border-width: 12px;
  border-color: transparent;
  border-left-color: #333;
  border-style: solid;
  content: "";
  z-index: 1;
}

.tag-tab>li:after {
  right: -11px;
  border-left-color: #fff;
}

.tag-tab>li:hover {
  color: #009a61;
}

.tag-tab>li:hover:before {
  border-left-color: #009a61;
}
      	
      	
      </style>
		
	</body>
</html>
